@import '../common/variables.scss';
/* Placeholder
 -------------------------- */
@mixin placeholder {
  &::-webkit-input-placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }
}

@mixin make-row($gutter: 0) {
  position: relative;
  margin-left: ($gutter / -2);
  margin-right: ($gutter / -2);
  height: auto;
  @include clear-fix();
}

@mixin make-grid($class: '') {
  @include float-grid-columns($class);
  @include loop-grid-columns($class);
}

@mixin float-grid-columns($class) {
  @for $i from 0 through 24 {
    .yun-col-span#{$class}-#{$i} {
      float: left;
      flex: 0 0 auto;
    }
  }
}
@mixin loop-grid-columns($class) {
  @for $i from 0 through 24 {
    .yun-col-span#{$class}-#{$i} {
      display: block;
      width: percentage(($i / 24));
    }
    .yun-col#{$class}-push-#{$i} {
      left: percentage(($i / 24));
    }
    .yun-col#{$class}-pull-#{$i} {
      right: percentage(($i / 24));
    }
    .yun-col#{$class}-offset-#{$i} {
      margin-left: percentage(($i / 24));
    }
    .yun-col#{$class}-order-#{$i} {
      order: $i;
    }
  }
  .yun-col-span#{$class}-#{0} {
    display: none;
  }
  .yun-col#{$class}-push-0 {
    left: auto;
  }
  .yun-col#{$class}-pull-0 {
    right: auto;
  }
  .yun-col#{$class}-offset-0 {
    margin-left: 0;
  }
  .yun-col#{$class}-order-0 {
    order: 0;
  }
}

@mixin clear-fix {
  zoom: 1;
  &:before,
  &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }
}

@mixin disabled() {
  opacity: 1;
  cursor: not-allowed;
  color: $color-text-placeholder;
}
